<template>
	<div class="homebox">
		<Tabbar :leftText="$t('textTrans.投资')"></Tabbar>
		<div class="boxrr">
			<van-tabs v-model="active" type="card" color="#00A170" @click="onClick">
				<van-tab :title="$t('textTrans.产品列表')"></van-tab>
				<van-tab :title="$t('textTrans.购买清单')"></van-tab>
			</van-tabs>
			<div class="noticeWrap" v-if="active==0">
				<div v-for="(item, index) in list" :key="index"
				@click="jumpTo(item.id)"
					style="margin-top:14px;width: 98%;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);background: #bededd;border-radius: 10px;">
					<div style="color: #333;font-size: 13px;margin: 10px;">
						<div style="width: 100%;display: flex;align-items: center;">
							<img style="width: 130px;height:88px;margin-right: 15px;" :src="item.image" alt="">
							<div style="color: #fff;font-size: 14px;" >
							<div style="color: #fff;">
								{{$t('textTrans.名称')}}:{{item.name}}
							</div>
							<div style="word-break: break-all; margin-top: 6px">
								{{$t('textTrans.循环')}}: <span style="color: rgb(0, 161, 112);">  {{ item.day }}{{$t('textTrans.天')}}</span>
							</div>
							<div style="margin-top: 6px">
								{{$t('textTrans.利率')}}: <span style="color: rgb(0, 161, 112);">  {{ item.rate }}%</span>
							</div>
					</div>
						</div>

					</div>
				</div>
			</div>
			<div  class="noticeWrap"  v-else>
				<div v-for="(item, index) in buydata" :key="index"
				
						style="border-radius: 5px; margin-top:14px;width: 48%;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);background: #bededd;">
						<div style="color: #333;font-size: 14px;margin: 10px;">
							<div style="width: 100%;text-align: center;">
								<img style="width: 130px;height: 88px;" :src="item.image" alt="">
								<div style="text-align: left;padding: 0 10px;">
								<div style="color: #333;">
									{{$t('textTrans.名称')}}:{{item.name}}
								</div>
								<div style="word-break: break-all; margin-top: 6px">
									{{$t('textTrans.循环')}}:{{ item.day }}{{$t('textTrans.天')}}
								</div>
								<div style="color: #333; margin-top: 6px">
									{{$t('textTrans.利率')}}:{{ item.rate }}%
								</div>
								<div style="color: #333; margin-top: 6px">
									{{$t('textTrans.起始时间')}}:{{ item.create_time | time}}
								</div>
								<div style="color: #333; margin-top: 6px">
									{{$t('textTrans.结束时间')}}:{{ item.end_time | time }}
								</div>
						<div style="color: #333; margin-top: 6px">
							{{$t('textTrans.下单时间')}}:{{ item.create_time }}
						</div>
						<div style="color: #333; margin-top: 6px">
							{{$t('textTrans.状态')}}:{{ item.status==1?$t("textTrans.赎回"):$t("textTrans.已结束") }}
						</div>
						</div>
							</div>
				
						</div>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
	import {
		projectList,
		myProjectsRecord,
		remittanceRecordList,
	} from "../../api/home";
	export default {
		data() {
			return {
				active: 0,
				noticeList: [{
						name: "已审核",
						id: "0"
					},
					{
						name: "待审核",
						id: "1"
					},
				],
				draw_id: "",
				list: [],
				buydata:[],
				money: "",
				address: "",
				cuname: "",
				cardinal_number: "",
				pay_password: "",
			};
		},
		created() {
			this.getlist();
			this.getbuylisy()
		
		},
		methods: {
			getbuylisy(){
				myProjectsRecord().then(res=>{
					this.buydata = res
				})
			},
			jumpTo(e){
				this.$router.push({name:'graborderDetail',query:{
					id:e
				}})
			},
			onClick(e) {
				if (e > 0) {
					this.getbuylisy()
				} else {
					this.getlist();
				}
			},
			getlist() {
				projectList().then((res) => {
					this.list = res;
				});
			},
			goRight() {
				this.$router.push({
					path: "withdrawRecord"
				});
			},
			getrate() {
				this.rate = (this.noticeList[0].rate / 100) * this.money;
			},
			getid(item) {
				this.draw_id = item.id;
				this.getlist();
			},
			onClickLeft() {
				this.$router.go(-1);
			},
		},
	};
</script>

<style scoped lang="less">
	// /deep/.van-tabs--card {
	// 	height: 60px !important;
	// }

	// /deep/.van-tabs__wrap {
	// 	height: 60px !important;

	// 	/deep/.van-tab {
	// 		// background: #F5F5F5;
	// 		padding: 20px 20px !important;
	// 	}
	// }

	.boxrr {
		width: 100%;
	}

	/deep/.van-cell {
		background: transparent;
		color: white;
	}

	/deep/.van-field__control {
		color: white;
	}

	.homebox {
		width: 100%;
		// background: #f4f2f2;
		background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
	}

	.van-nav-bar {
		background: linear-gradient(270deg, #326964 0%, #326964 100%);

		/deep/.van-nav-bar__title {
			color: #ffffff;
		}

		/deep/ .van-icon {
			color: #ffffff;
		}
	}

	.noticeWrap {
	background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
		padding: 0 20px 70px 20px;
		margin-top: 11px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}
</style>
